<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        var ws = new WebSocket("ws://localhost:8181");
        function openLink () {
            ws.onopen = function (e) {
                console.log('click button, Connection to server opened');
            }
        }

        function sendMessage() {
            var message = $('#message').val()
            ws.send(JSON.stringify(message));
        }
        ws.onmessage = function (e) {
            var data = JSON.parse(e.data)
            console.log(data)
            var p = document.createElement("p")
            p.innerHTML = "<span>" + data.nickname + ":" + "</soan>" + data.message
            document.getElementById('talk').appendChild(p)
        }
        function closeLink () {
            ws.close()
        }
    </script>
</head>
<body>
     <div class="vertical-center">
         <div id="talk">

         </div>
        <div class="container">
            <p>&nbsp;</p>
            <form role="form" id="chat_form" onsubmit="sendMessage(); return false;">
                <div class="form-group">
                    message: <input class="form-control" type="text" name="message" id="message"
                           placeholder="Type text to echo in here" value="" />
                </div>
                <button type="button" id="send" class="btn btn-primary"
                        onclick="sendMessage()">
                    Send!
                </button>
            </form>
        </div>
    </div>
</body>
</html>